<template>
	<view class="container">
		<view class="user-section">
			<view class="bg">
				<image style="width: 100%; height: 600upx;" src="../../static/img/me/center_bgimg.png"></image>
			</view>
			<view class="user-info-box" @click="navTo('/pages/set/set')">
				<view class="left_box">
					<view class="portrait-box">
						<image class="portrait" :src="avatarUrl || '../../static/img/me/center_header.png'"></image>
					</view>
					<view class="user-box" v-if="userInfo.nickname">
						<view class="info-box">
							<text class="username">{{userInfo.nickname}}</text>
							<text class="partner" v-show="userInfo.userLevel == '0' || userInfo.userLevel == '1' || userInfo.userLevel == '2' || userInfo.userLevel == '3'">{{userInfo.userLevel == '1' ? '零售商' : userInfo.userLevel == '2' ? '代理商' : userInfo.userLevel == '3' ? '合伙人' : '普通用户'}}</text>
						</view>
						<view class="invitation">
							<text class="Code">{{userInfo.invitationCode ? '邀请码 :':''}}</text>
							<text class="num">{{userInfo.invitationCode}}</text>
						</view>
					</view>
					<view class="user-box" v-else>
						<view class="info-box">
							<text class="username">登录／注册</text>
						</view>
						<view class="invitation">
							<text class="num">快去登录／注册使用更多功能吧～</text>
						</view>
					</view>
				</view>
				<view class="right_box">
					<image src="../../static/img/me/my_center_arrows.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="orderList">
			<!-- 订单头部 -->
			<view class="section_ordr">
				<view class="section_left">我的订单</view>
				<view class="section_right" @click="navTo('/pages/order/order?state=0')">查看全部 > </view>
			</view>
			
			<!-- 订单 -->
			<view class="order-section">
				<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
					<image src="../../static/img/me/cengter_daifk.png" mode=""></image>
					<text>待付款</text>
					<!-- <view :class="order.uncomment ? 'order_number' : ''" v-show="order.uncomment !=0">{{order.uncomment}}</view> -->
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
					<image src="../../static/img/me/center_daifh.png" mode=""></image>
					<text>待发货</text>
					<!-- <view :class="order.unpaid ? 'order_number' : ''" v-show="order.unpaid !=0">{{order.unpaid}}</view> -->
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
					<image src="../../static/img/me/center_daish.png" mode=""></image>
					<text>待收货</text>
					<!-- <view :class="order.unrecv ? 'order_number' : ''" v-show="order.unrecv !=0">{{order.unrecv}}</view> -->
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
					<image src="../../static/img/me/center_daipingjia.png" mode=""></image>
					<text>评价</text>
					<!-- <view :class="order.unship ? 'order_number' : ''" v-show="order.unship !=0">{{order.unship}}</view> -->
				</view>
			</view>
		</view>
		
		<!-- 实名认证 -->
		<view class="RealName" v-show="gender == 0">
			<view class="RealName_img" @click="navTo('/pages/realName/realName')">
				<image style="width: 100%; height: 140upx;" src="../../static/img/me/center_vip.png" alt=""></image>
			</view>
		</view>
		
		<!-- 更多功能 -->
		<view class="history-section icon">
			<list-cell v-show="userInfo.userLevel == '1' || userInfo.userLevel == '2' || userInfo.userLevel == '3'" iconImg="../../static/img/index_slices/homedistributio1.png" iconColor="#5fcda2" title="云仓" @eventClick="navTo('/pages/user/Yuncang')"></list-cell>
			<list-cell iconImg="../../static/img/index_slices/homedistributio2.png" iconColor="#5fcda2" title="分销中心" @eventClick="navTo('/pages/distribution/distribution')"></list-cell>
			<list-cell iconImg="../../static/img/index_slices/homedistributio3.png" iconColor="#5fcda2" title="邀请码"   @eventClick="navTo('/pages/user/invitation')"></list-cell>
			<list-cell iconImg="../../static/img/index_slices/homedistributio4.png" iconColor="#5fcda2" title="每日任务" @eventClick="navTo('/pages/user/dailyTasks')"></list-cell>
		</view>
		<view class="history-section icon">
			<!-- <list-cell iconImg="../../static/img/index_slices/homedistributio5.png" iconColor="#5fcda2" title="关于我们" @eventClick="navTo('/pages/set/set')"></list-cell> -->
			<list-cell iconImg="../../static/img/index_slices/homedistributio6.png" iconColor="#5fcda2" title="我的发布" @eventClick="navTo('/pages/user/myPost')"></list-cell>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import listCell from '@/components/mix-list-cell';
	import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue"

	export default {
		components: {
			listCell,
			tuiModal
		},
		
		data() {
			return {
				order: {},
				userInfo:"",
				avatarUrl:"",
				page:"",
				gender:"",
			}
		},
		
		onLoad() {
			this.getindex();
			this.getUserInfo();
		},
		
		onShow(){
			this.getUserInfo();
		},
		
		computed: {
			...mapState(['hasLogin'])
		},
		
		onTabItemTap(){
			if (!this.hasLogin) {
				uni.navigateTo({
					url:"/pages/public/login?loginout=1"
				})
			}else{
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		},
		
		methods: {
			// 获取订单数量
			getindex(){
				let _this = this
				_this.tui.request(
					'/app/user/index',
					'GET', {},
					false,
					false,
					false,
				).then(res => {
					if (res.errno == 0) {
						_this.order = res.data.order
					} else {
						console.log(res.errmsg)
					}
				
				})
			},
			
			// 获取用户信息
			getUserInfo(){
				let _this = this;
				// 服务器公共地址
				// console.log(this.tui.interfaceUrl())
				_this.tui.request('/app/user/getUserInfo', 'GET', {}, false, false, false, )
					.then(res => {
						if(res.errno == 0){
							_this.userInfo = res.data.userInfo
							_this.avatarUrl = _this.userInfo.avatar;
							_this.gender = _this.userInfo.gender
						}else{
							if(res.errno == 507){
								uni.removeStorageSync("token");
							}
							// if (res.errno == 505) {
							// 	_this.tui.modal("登录信息已失效，请重新登录", false, () => {
							// 		uni.redirectTo({
							// 			url: '/pages/public/login'
							// 		})
							// 	})
							// 	return
							// }
						}
					}).catch(err => {
						console.log(err)
					})
			},
			
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		height: 100%;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.container {
		background: #F5F5F5;
		height: 100%;
	}

	.user-section {
		padding: 320upx 30upx 0;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			filter: blur(1px);

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.user-info-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		top: -115upx;
		z-index: 1;

		.left_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.portrait {
				width: 130upx;
				height: 130upx;
				/* border: 5upx solid #fff; */
				border-radius: 50%;
			}

			.info-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.username {
				margin-left: 20upx;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 800;
				color: rgba(255, 255, 255, 1);
			}

			.partner {
				background: rgba(255, 255, 255, 1);
				border-radius: 16px;
				margin-left: 20upx;
				font-size: 12px;
				padding: 2px 10px 2px 10px;
				color: #D14798;
			}

			.invitation {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 29px;
				margin-left: 20upx;

				.Code {
					padding-right: 5upx;
				}

				.num {
					padding-left: 5upx;
				}
			}
		}

		.right_box {

			image {
				width: 23upx;
				height: 32upx;
			}
		}

	}


	.section_ordr {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 18upx 18upx 0 0;

		.section_right {
			font-size: 12px;
			color: #808080;
			font-weight: 100;
		}
	}


	.order-section {
		@extend %section;
		padding: 28upx 0;
		border-radius: 0 0 18upx 18upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;

			image {
				width: 44upx;
				height: 44upx;
				margin-bottom: 4px;
			}
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}
	.order_number {
		position: absolute;
		top: 2px;
		right: 15px;
		width: 18px;
		height: 15px;
		background-color: #fff;
		border-radius: 50%;
		border: 1px solid #FF0000;
		font-size: 12px;
		text-align: center;
		line-height: 13px;
	}
	
	.orderList {
		width: 93%;
		margin: 0 auto;
		border-radius:18upx;
		box-shadow: 0px 5px 9px 0px rgba(145, 93, 93, 0.2);
		position: relative;
		top: -43px;
	}
	
	.RealName{
		width: 93%;
		margin: 0 auto;
		margin-top: -60upx;
	}
	.RealName_img{
		width: 100%;
		
		img{
			width: 100%;
			height: 100%;
		}
		
	}
	
	/* 更多 */
	.history-section {
		width: 93%;
		margin: 0 auto;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: 600;
			color: #333333;
			line-height: 45upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.list_more {
			padding: 30upx 30upx 0;
			width: 100%;

			.more {
				display: inline-block;
				text-align: center;
				width: 25%;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 33upx;
				margin-bottom: 15px;

				image {
					display: inline-block;
					text-align: center;
					margin: 0 auto;
					width: 80upx;
					height: 80upx;
					border-radius: 10upx;
				}

			}
		}
	}
</style>
